<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>loader</title>
	<link rel="stylesheet" type="text/css" href="/styles.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var dLoader = 0;
		var dProgress = 0;
		var loader = $('.loader');
		var progress = $('.progress');

		function sec() {
			loader.css('transform', 'rotate(' + dLoader + 'deg)');
			progress.css('width', dProgress + '%');
			dLoader += 5;
			dProgress += 1;
			if(dLoader >= 360) { dLoader = 0; }
			if(dProgress >= 100) { dProgress = 0; }
		}
		setInterval(sec, 10) // использовать функцию
		$('a').click(function(e){
			e.preventDefault();
		});
		//console.log(load.css('transform'));

	});
	</script>
</head>
<body>
	<div class="main">
		<h1>Hello I'am title page</h1>
		<h2>Example text</h2>
		<div class="box boxgreen">
			<h3>Title box</h3>
			<p>Quis dolorem ex totam. Illo ipsum architecto perferendis? Soluta natus unde assumenda rem, tempora impedit voluptatem earum ut eos similique labore voluptatibus quod esse perferendis, harum nam! Placeat, consequatur, hic?</p>
		</div>
		<p class="leftborder">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit laborum dolor alias voluptatem asperiores, recusandae in earum, labore velit aut unde maiores odio modi dolorem consectetur? Explicabo animi hic ab molestiae, tempora aliquam iste quaerat dolor, sequi, ipsa earum repellat.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, quis quam. Aliquam mollitia dolore dolores natus, quod numquam officiis eveniet, accusamus nemo quaerat, unde illum rerum suscipit blanditiis ex saepe dolor laborum sit. Sed, aut ducimus omnis doloribus ipsum tempore sapiente nemo voluptatum reprehenderit consequatur aliquid minus, distinctio consectetur voluptatibus perspiciatis! Veniam quidem fuga natus repellendus quia nulla repudiandae eveniet magni, blanditiis iure culpa iste, eum quisquam alias animi in dolorum consectetur debitis inventore, quos quaerat. Sit doloribus minima corporis amet nulla, fugiat debitis culpa, soluta qui tempora ad pariatur accusamus commodi cum accusantium ullam quam perferendis. Cumque, animi sunt!</p>
		<h2>Example buttons</h2>
		<button class="green button">
			<p><span class="icoCheck"></span>Accept</p>
		</button>
		<button class="red button">
			<p><span class="icoCancel"></span>Cancel</p>
		</button>
		<button class="blue button">
			<p><span class="icoBack"></span>Back</p>
		</button>
		<button class="blue button">
			<p><span class="icoNext"></span>Next</p>
		</button>
		<button class="blue button">
			<p><span class="icoRefresh"></span>Refresh</p>
		</button>
		<button class="orange button">
			<p><span class="icoCheck"></span>Orange</p>
		</button>
		<button class="yellow button">
			<p><span class="icoCheck"></span>Yellow</p>
		</button>
		<button class="gray button">
			<p><span class="icoCheck"></span>Gray</p>
		</button>
		<h2>Example rows</h2>
		<div class="rows">
			<div class="w50">
				<p class="leftborder">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ea at, iusto blanditiis sint sit ex, et labore, laboriosam dicta accusantium id ipsum ipsam. Quaerat aliquam, tempore autem, nihil repudiandae quae reprehenderit maxime fuga totam expedita iusto ab nam. Consectetur, hic minus tenetur temporibus fugit laudantium veritatis quasi, saepe enim.</p>
			</div>
			<div class="w50">
				<div class="box boxorange">
					<h3>Title box</h3>
					<p>Quis assumenda rem, tempora impedit voluptatem earum ut eos similique labore voluptatibus quod esse perferendis, harum nam! Placeat, consequatur, hic?</p>
				</div>
			</div>
		</div>
		<div class="rows">
			<div class="w25">
				<p class="leftborder">Ex, et labore, laboriosam dicta accusantium id ipsum ipsam. Quaerat aliquam, tempore autem, nihil repudiandae quae reprehenderit maxime fuga totam expedita iusto ab nam. Consectetur, hic minus tenetur temporibus fugit laudantium veritatis quasi, saepe enim.</p>
			</div>
			<div class="w25">
				<div class="box boxblue">
					<h3>Title box</h3>
					<p>Quis assumenda rem, tempora impedit voluptatem earum ut eos similique labore voluptatibus quod esse perferendis, harum nam! Placeat, consequatur, hic?</p>
				</div>
			</div>
			<div class="w25">
				<p class="leftborder">Ex, et labore, laboriosam dicta accusantium id ipsum ipsam. Quaerat aliquam, tempore autem, nihil repudiandae quae reprehenderit maxime fuga totam expedita iusto ab nam. Consectetur, hic minus tenetur temporibus fugit laudantium veritatis quasi, saepe enim.</p>
			</div>
			<div class="w25">
				<div class="box boxyellow">
					<h3>Title box</h3>
					<p>Quis assumenda rem, tempora impedit voluptatem earum ut eos similique labore voluptatibus quod esse perferendis, harum nam! Placeat, consequatur, hic?</p>
				</div>
			</div>
		</div>
		<div class="rows">
			<div class="w50">
				<div class="w25"><h3>1</h3></div>
				<div class="w25"><h3>2</h3></div>
				<div class="w25"><h3>3</h3></div>
				<div class="w25"><h3>4</h3></div>
			</div>
			<div class="w50">
				<div class="w25"><h3>5</h3></div>
				<div class="w25"><h3>6</h3></div>
				<div class="w25"><h3>7</h3></div>
				<div class="w25"><h3>8</h3></div>
			</div>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptas, necessitatibus asperiores, beatae iusto alias quasi praesentium laboriosam, labore quod dolores cumque quas! Maiores, vero vitae distinctio et? In quod, tenetur maiores voluptates ducimus deserunt rerum ipsa natus perferendis earum tempora nesciunt fugit voluptate omnis nemo ratione fugiat unde eveniet cum consequuntur excepturi aliquam asperiores esse libero doloribus! Totam inventore, tempore laudantium ratione quia saepe nam voluptatum suscipit iste eveniet rem recusandae voluptatem consequuntur sapiente non tempora maxime. Est ad illum illo natus corrupti quaerat nisi dolore magni perferendis quisquam recusandae cum alias iure, vero labore placeat laudantium quidem iste.</p>
		<h2>Example forms</h2>
		<form>
			<h3>Range</h3>
			<input type="range" min="0" max="100" value="0" step="1">
			<h3>Text input</h3>
			<input type="text" placeholder="Enter text">
		</form>
		<h2>Example tables</h2>
		<h3>Projects</h3>
		<table class="table">
			<tr>
				<th><button class="sort"></button><span>Название</span></th>
				<th><button class="sort"></button><span>Клиент</span></th>
				<th class="right"><button class="sort"></button><span>Прибыль (руб)</span></th>
				<th><button class="sort"></button><span>Статус</span></th>
			</tr>
			<tr>
				<td>Гранель МКАД</td>
				<td>ООО &laquo;Гранель Девелопмент&raquo;</td>
				<td class="right"> - 12 000</td>
				<td>Подписание договора</td>
			</tr>
			<tr class="active">
				<td>Гранель МКАД</td>
				<td>ООО &laquo;Гранель Девелопмент&raquo;</td>
				<td class="right"> + 12 000</td>
				<td>Подписание договора</td>
			</tr>
			<tr>
				<td colspan="4">
					<table>
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
						</tr>
						<tr>
							<td colspan="4">
								<button class="red button">
									<p><span class="icoCancel"></span>Cancel</p>
								</button>
								<button class="green button">
									<p><span class="icoCheck"></span>Save</p>
								</button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>Гранель МКАД</td>
				<td>ООО &laquo;Гранель Девелопмент&raquo;</td>
				<td class="right"> + 150 000</td>
				<td>Подписание договора</td>
			</tr>
			<tr>
				<td>Гранель МКАД</td>
				<td>ООО &laquo;Гранель Девелопмент&raquo;</td>
				<td class="right"> + 150 000</td>
				<td>Подписание договора</td>
			</tr>
			<tr>
				<td>Гранель МКАД</td>
				<td>ООО &laquo;Гранель Девелопмент&raquo;</td>
				<td class="right"> + 150 000</td>
				<td>Подписание договора</td>
			</tr>
		</table>
		<h2>Toolboxes</h2>
		<div class="rows">
			<div class="toolbox w25 blue">
				<div class="title">Hello I'am toolbox</div>
				<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, totam ex pariatur id similique quia vero labore unde, eius, officia saepe alias! Delectus minus vel quas nesciunt praesentium ut fugit maiores totam. Odit alias modi delectus. Illo perferendis illum non.</div>
			</div>
			<div class="toolbox w25 green">
				<div class="title">Hello I'am toolbox</div>
				<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, totam ex pariatur id similique quia vero labore unde, eius, officia saepe alias! Delectus minus vel quas nesciunt praesentium ut fugit maiores totam. Odit alias modi delectus. Illo perferendis illum non.</div>
			</div>
			<div class="toolbox w25 orange">
				<div class="title">Hello I'am toolbox</div>
				<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, totam ex pariatur id similique quia vero labore unde, eius, officia saepe alias! Delectus minus vel quas nesciunt praesentium ut fugit maiores totam. Odit alias modi delectus. Illo perferendis illum non.</div>
			</div>
			<div class="toolbox w25 yellow">
				<div class="title">Hello I'am toolbox</div>
				<div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, totam ex pariatur id similique quia vero labore unde, eius, officia saepe alias! Delectus minus vel quas nesciunt praesentium ut fugit maiores totam. Odit alias modi delectus. Illo perferendis illum non.</div>
			</div>
		</div>
		<div class="rows">
			<div class="w25">
				<ul>
					<li><a href="#"><span class="counter">1090</span>First</a></li>
					<li><a href="#"><span class="counter">115</span>Second</a></li>
					<li><a href="#"><span class="counter">7</span>Third</a></li>
					<li><a href="#">Fourth</a></li>
					<li><a href="#">Fifth</a></li>
					<li><a href="#">Sixth</a></li>
				</ul>
			</div>
			<div class="w25">
				<div class="toolbox green">
					<div class="title">Hello I'am toolbox</div>
					<div class="desc">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nisi mollitia reprehenderit sunt earum tempore in quisquam corporis, porro ipsam, expedita blanditiis similique repudiandae, sit! Sapiente sed et, voluptates labore!</p>
						<div class="rows">
							<div class="w25">
								<div class="document">
									<span class="icon_doc"></span>
									<span class="warning">!</span>
								</div>
							</div>
							<div class="w25">
								<div class="document">
									<span class="icon_hands"></span>
									<span class="warning">3</span>
								</div>
							</div>
							<div class="w25">
								<div class="document">
									<span class="icon_che"></span>
									<span class="warning">1</span>
								</div>
							</div>
							<div class="w25">
								<div class="document">
									<span class="icon_stat"></span>
									<span class="warning">!</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="w25">
				<div class="toolbox orange">
					<div class="title">Hello I'am toolbox</div>
					<ul class="history">
						<li><a href="#"><span class="date">21.10.2014</span><span class="historyTitle">Lorem ipsum dolor sit amet Lorem ipsum. sit amet.</span></a></li>
						<li><a href="#"><span class="date">21.10.2014</span><span class="historyTitle">Lorem ipsum dolor sit amet Lorem ipsum. sit amet.</span></a></li>
						<li><a href="#"><span class="date">21.10.2014</span><span class="historyTitle">Lorem ipsum dolor sit amet Lorem ipsum. sit amet.</span></a></li>
						<li><a href="#"><span class="date">21.10.2014</span><span class="historyTitle">Lorem ipsum dolor sit amet Lorem ipsum. sit amet.</span></a></li>
						<li><a href="#"><span class="date">21.10.2014</span><span class="historyTitle">Lorem ipsum dolor sit amet Lorem ipsum. sit amet.</span></a></li>
					</ul>	
					<p class="more">Show more</p>
					<!-- <div class="title">Hello I'am toolbox</div> -->
				</div>
			</div>
			<div class="w25">
				<div class="toolbox green">
					<div class="title">Hello I'am toolbox calendar</div>
					<div class="calendar">
						<table>
							<tr>
								<th colspan="7"><a href="#">сентябрь</a> Октябрь 2014 <a href="#">ноябрь</a></th>
							</tr>
							<tr>
								<th>Пн</th>
								<th>Вт</th>
								<th>Ср</th>
								<th>Чт</th>
								<th>Пт</th>
								<th>Сб</th>
								<th>Вс</th>
							</tr>
							<tr>
								<td class="disabled"><a href="#">29</a></td>
								<td class="disabled"><a href="#">30</a></td>
								<td><a href="#">1</a></td>
								<td><a href="#">2</a></td>
								<td><a href="#">3</a></td>
								<td><a href="#">4</a></td>
								<td><a href="#">5</a></td>
							</tr>
							<tr>
								<td><a href="#">6</a></td>
								<td><a href="#">7</a></td>
								<td><a href="#">8</a></td>
								<td><a href="#">9</a></td>
								<td><a href="#">10</a></td>
								<td><a href="#">11</a></td>
								<td><a href="#">12</a></td>
							</tr>
							<tr>
								<td><a href="#">13</a></td>
								<td><a href="#">14</a></td>
								<td><a href="#">15</a></td>
								<td class="current"><a href="#">16</a></td>
								<td><a href="#">17</a></td>
								<td><a href="#">18</a></td>
								<td><a href="#">19</a></td>
							</tr>
							<tr>
								<td><a href="#">20</a></td>
								<td><a href="#">21</a></td>
								<td><a href="#">22</a></td>
								<td><a href="#">23</a></td>
								<td class="remind"><a href="#">24</a></td>
								<td><a href="#">25</a></td>
								<td><a href="#">26</a></td>
							</tr>
							<tr>
								<td class="remind"><a href="#">27</a></td>
								<td><a href="#">28</a></td>
								<td class="remind"><a href="#">29</a></td>
								<td><a href="#">30</a></td>
								<td><a href="#">31</a></td>
								<td class="disabled"><a href="#">1</a></td>
								<td class="disabled"><a href="#">2</a></td>
							</tr>
							<tr>
								<td class="disabled"><a href="#">3</a></td>
								<td class="disabled"><a href="#">4</a></td>
								<td class="disabled"><a href="#">5</a></td>
								<td class="disabled"><a href="#">6</a></td>
								<td class="disabled"><a href="#">7</a></td>
								<td class="disabled"><a href="#">8</a></td>
								<td class="disabled"><a href="#">9</a></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="rows">
			<div class="toolbox w25 blue arrowRight">
				<div class="title">Hello I'am toolbox</div>
				<div class="desc">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing id similique quia vero labore unde, eius, officia saepe alias! Delectus minus vel quas nesciunt praesentium ut fugit maiores totam. Odit alias modi delectus. Illo perferendis illum non. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, magni.</p>
					<p class="right"><a href="#">More info</a></p>
				</div>
			</div>
			<div class="w25">
				<h3>Title example</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis neque, tempore! Suscipit distinctio nam nulla nihil facere optio ut, doloribus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nemo aliquid odio numquam cum consequatur molestias harum optio vero facere vel, rerum temporibus beatae dolorum accusantium voluptas et quo quisquam ad libero repudiandae, ipsam quibusdam? Doloribus iste pariatur, facilis dolorem ea veritatis. Harum fuga magnam corporis quas libero totam voluptatem.</p>
			</div>
			<div class="w50">
				<div class="toolbox green">
					<p class="title">Events calendar</p>
					<div class="rows">
						<div class="w50">
							<div class="calendar">
								<table>
									<tr>
										<th colspan="7"><a href="#">сентябрь</a> Октябрь 2014 <a href="#">ноябрь</a></th>
									</tr>
									<tr>
										<th>Пн</th>
										<th>Вт</th>
										<th>Ср</th>
										<th>Чт</th>
										<th>Пт</th>
										<th>Сб</th>
										<th>Вс</th>
									</tr>
									<tr>
										<td class="disabled"><a href="#">29</a></td>
										<td class="disabled"><a href="#">30</a></td>
										<td><a href="#">1</a></td>
										<td><a href="#">2</a></td>
										<td><a href="#">3</a></td>
										<td><a href="#">4</a></td>
										<td><a href="#">5</a></td>
									</tr>
									<tr>
										<td><a href="#">6</a></td>
										<td><a href="#">7</a></td>
										<td><a href="#">8</a></td>
										<td><a href="#">9</a></td>
										<td><a href="#">10</a></td>
										<td><a href="#">11</a></td>
										<td><a href="#">12</a></td>
									</tr>
									<tr>
										<td><a href="#">13</a></td>
										<td><a href="#">14</a></td>
										<td><a href="#">15</a></td>
										<td class="current"><a href="#">16</a></td>
										<td><a href="#">17</a></td>
										<td><a href="#">18</a></td>
										<td><a href="#">19</a></td>
									</tr>
									<tr>
										<td><a href="#">20</a></td>
										<td><a href="#">21</a></td>
										<td><a href="#">22</a></td>
										<td><a href="#">23</a></td>
										<td class="remind"><a href="#">24</a></td>
										<td><a href="#">25</a></td>
										<td><a href="#">26</a></td>
									</tr>
									<tr>
										<td class="remind"><a href="#">27</a></td>
										<td><a href="#">28</a></td>
										<td class="remind"><a href="#">29</a></td>
										<td><a href="#">30</a></td>
										<td><a href="#">31</a></td>
										<td class="disabled"><a href="#">1</a></td>
										<td class="disabled"><a href="#">2</a></td>
									</tr>
									<tr>
										<td class="disabled"><a href="#">3</a></td>
										<td class="disabled"><a href="#">4</a></td>
										<td class="disabled"><a href="#">5</a></td>
										<td class="disabled"><a href="#">6</a></td>
										<td class="disabled"><a href="#">7</a></td>
										<td class="disabled"><a href="#">8</a></td>
										<td class="disabled"><a href="#">9</a></td>
									</tr>
								</table>
							</div>
						</div>
						<div class="w50">
							<div class="desc">
								<h3>Title event</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt earum quos cupiditate eos pariatur? Assumenda vel eos exercitationem velit, nulla delectus dolorem quisquam doloribus, suscipit, tempora molestiae hic autem consectetur.</p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h2>Others</h2>
		<div class="rows">
			<div class="w50">
				<p>Process</p>
				<div class="progressBar"></div>
				<h2>Formats icon</h2>
				<h3>Big icon file</h3>
				<div class="rows">
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.pdf</span> <span class="icon format_pdf"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.doc</span> <span class="icon format_doc"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.xls </span> <span class="icon format_xls"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.jpg</span> <span class="icon format_jpg"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.png</span> <span class="icon format_png"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.zip</span> <span class="icon format_zip"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.rar</span> <span class="icon format_rar"></span></p></button>
					</div>
					<div class="w50">
						<button class="link_document"><p><span>Test_document_001.txt</span> <span class="icon format_txt"></span></p></button>
					</div>
				</div>
			</div>
			<div class="w50">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum excepturi ullam corporis aliquam nulla aspernatur deleniti, libero nostrum necessitatibus soluta molestias consequuntur debitis nisi minima labore suscipit perferendis ipsum quo magni sequi. Minima iste quia voluptas, quo pariatur assumenda quibusdam, fuga totam quaerat. Nisi animi magnam odio magni unde cum placeat, minus dolor minima voluptates earum in adipisci, dolore dolores molestias, dolorum rerum temporibus. Facilis maxime aperiam voluptatem adipisci obcaecati incidunt repellendus accusantium, numquam dolorem doloremque alias laborum, eligendi nobis assumenda, quidem? Doloribus excepturi vitae corrupti aliquid in dignissimos at amet facilis ipsum ad est iste perferendis, voluptatibus hic voluptate animi culpa dolor eos voluptatum id, eius nulla quia. Architecto, aperiam harum dolor accusamus inventore ipsum sit est nulla mollitia aliquam voluptatibus et doloribus corrupti consectetur officia cum. Vero, dolor amet maxime ea magnam esse culpa eius possimus! Quos minima modi laudantium tenetur, ipsa quaerat odio aperiam molestias rerum quasi ratione inventore facere illo quis dolore, maxime, possimus, asperiores earum nisi fugit quo sed! Sint consequatur praesentium accusamus rem vitae, veniam minus ipsa, at a. Dolorum ducimus tempore error aut incidunt enim iste dicta praesentium possimus dignissimos expedita tenetur autem cumque, fuga dolorem adipisci facilis recusandae at qui et vitae.</p>
			</div>
		</div>
	</div>
	<!--
	<div class="bg">
		
	</div>
	<div class="loader">
		
	</div>
	<div class="progress">
		
	</div> 
	-->
</body>
</html>